<template>
  <div class="k-resume-modal" v-if="showModal">
    <span class="ksd-resume-close" @click="handleClose"><i class="iconfont icon-shanchu4"></i></span>
    <div style="height:100vh;overflow: auto;position: relative;z-index: 200;background: #fff">
      <div class="operation-item gui-paddingn flex justify-between mainbgf" style="position: sticky;top: 0">
        <div class="c333 fw">
          当前操作的是：{{itemObj.title}}，ID是:{{itemObj.id}}，当前模块是：{{mode}}
        </div>
        <div>
          <input type="text" placeholder="用户昵称、用户账号、用户手机" @blur="handleSearch"
                 v-model.trim="queryParams.keyword"
                 class="binput mr10"/>
          <input type="text" placeholder="用户UUID" @blur="handleSearch" v-model.trim="queryParams.uuid"
                 class="binput mr10"/>
          <select v-model.number="queryParams.forbidden" @change="handleSearch" class="binput mr10">
            <option :value="-1">--是否禁止--</option>
            <option :value="1">已禁止</option>
            <option :value="0">未禁止</option>
          </select>
          <select v-model.number="queryParams.vipFlag" @change="handleSearch" class="binput mr10">
            <option :value="-1">--vip身份--</option>
            <option :value="1">普通用户</option>
            <option :value="2">月会员</option>
            <option :value="3">季度会员</option>
            <option :value="4">年会员</option>
            <option :value="7">超级会员</option>
          </select>
          <select v-model.number="queryParams.teacherFlag" @change="handleSearch" class="binput mr10">
            <option :value="-1">--是否老师--</option>
            <option :value="1">老师</option>
            <option :value="0">普通用户</option>
          </select>
          <select v-model.number="queryParams.authorFlag" @change="handleSearch" class="binput mr10">
            <option :value="-1">--是否作者--</option>
            <option :value="1">作者</option>
            <option :value="0">普通用户</option>
          </select>
          <select v-model="queryParams.role" @change="handleSearch" class="binput">
            <option value="">--是否管理员--</option>
            <option value="admin">管理员</option>
            <option value="normal">普通用户</option>
          </select>
        </div>
      </div>
      <div class="gui-padding">
        <div>
          <table class="k-data-table-table w100" style="table-layout: auto;">
            <thead class="n-data-table-thead">
            <tr class="n-data-table-tr">
              <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">编号</div>
                </div>
              </th>
              <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">昵称</div>
                </div>
              </th>
              <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">账号</div>
                </div>
              </th>
              <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">UUID</div>
                </div>
              </th>
              <th>
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">VIP类型</div>
                </div>
              </th>
              <th>
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">操作</div>
                </div>
              </th>
            </tr>
            </thead>
            <tbody class="n-data-table-tbody">
            <template v-for="(item,index) in userList" :key="index">
              <tr class="n-data-table-tr">
                <td>{{ item.id }}</td>
                <td>
                  <div>{{ item.nickname }}</div>
                </td>
                <td>
                  <div>{{ item.account }}</div>
                </td>
                <td>
                  {{ item.uuid }}
                </td>
                <td>
                  <div>
                    <k-vip :vip="item.vipFlag"></k-vip>
                  </div>
                </td>
                <td>
                  <n-button v-if="mode=='teacher'" @click.prevent="handleBindUser(item)" type="success">绑定老师</n-button>
                  <n-button v-else @click.prevent="handleGrantUser(item)" type="success">开始授权</n-button>
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="20">
                <k-empty :show="total == 0"></k-empty>
                <div @click="handleLoadMore" v-if="total > queryParams.pageSize && queryParams.pageNo < pages"
                     class="flex justify-center pointer">加载更多({{ total || 0 }})
                </div>
                <div v-if="total > queryParams.pageSize && queryParams.pageNo == pages"
                     class="flex justify-center c999 mt20 mb20">没有更多了
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="k-resume-diaolog"></div>
  </div>
</template>
<script setup>
const showModal = ref(false)
const mode = ref("")
const total = ref(0)
const pages = ref(0)
const loadingFlag = ref(false)
const userList = ref([])
const itemObj = ref({})
const queryParams = reactive({
  keyword: "",
  pageNo: 1,
  pageSize: 20,
  vipFlag: -1,
  uuid: "",
  role: "",
  forbidden: -1,
  authorFlag: -1,
  teacherFlag: -1,
})
const emits = defineEmits(["success"])

const handleBindUser = async (user) => {
    emits("success",user,itemObj.value)
}

const handleGrantUser = async (user) => {
  try {
    var params = {
      uuid: user.uuid,
      opid: itemObj.value.id,
    }
    let resp = {}
    if(mode.value == 'channel') {
      resp = await useBatchAdminChannelApi(params)
    }else  if(mode.value == 'note') {
      resp = await useBatchAdminNoteApi(params)
    }else  if(mode.value == 'special') {
      resp = await useBatchAdminSpecialApi(params)
    }else  if(mode.value == 'resume') {
      resp = await useBatchAdminResumeApi(params)
    }else  if(mode.value == 'template') {
      resp = await useBatchAdminResumeTemplateApi(params)
    }
    if (resp.data) {
      useMessage().success("授权成功")
    }else{
      useMessage().warning("已经授权")
    }
  } catch (e) {
    useMessage().error(e.message)
  }
}


const handleSearch = async () => {
  queryParams.pageNo = 1
  userList.value = []
  handleLoadData()
}

const handleLoadData = async () => {
  loadingFlag.value = true
  const resp = await useLoadAdminUserListApi(queryParams)
  const newarr = resp.data.records
  userList.value = userList.value.concat(newarr)
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
}

const handleLoadMore = () => {
  queryParams.pageNo++
  handleLoadData()
}


const handleOpen = (item,type) => {
  showModal.value = true
  mode.value = type
  itemObj.value = item
  if(type=="teacher")queryParams.teacherFlag = 1
  handleLoadData()
}

const handleClose = () => {
  showModal.value = false
  itemObj.value = {}
  queryParams.pageNo = 1
  userList.value = []
}

defineExpose({
  handleOpen
})

definePageMeta({
  middleware: ["md-admin"],
  layout: "nindex",
})

</script>
<style scoped lang="scss">
._land_23vdq_1 {
  display: flex;
  justify-content: center;
  width: 100%;
}


._land-container_23vdq_7 {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 80px 8%;
  max-width: 1280px;
  padding: 40px 40px 30px
}

._land-img_23vdq_14 {
  grid-column: span 7;
  max-width: 100%;
  object-fit: contain
}


._land-text_23vdq_11 {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  align-items: flex-start;
  justify-content: center
}

._land-text_23vdq_11 > section {
  font-weight: bold;
  font-size: 28px;
  color: var(--text-color-primary, var(--text-color-primary, #222529))
}

._land-text_23vdq_11 > ul {
  padding: 0;
  margin: 0;
  margin-top: 28px;
  margin-bottom: 48px;
  margin-left: 20px;
  line-height: 200%;
  list-style: disc;
  color: #666;
  font-size: 16px;
}

.gda-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
}

.gdesign-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: 20px;
}

.gda-btn > i, .gda-btn > span {
  display: inline-flex;
  pointer-events: none;
  line-height: 1;
}

.k-data-table-table th {
  background: #fafafc;
}

.k-data-table-table td,
.k-data-table-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(239, 239, 245, 1);
}

.k-resume-diaolog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
}

.ksd-resume-close {
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 1000;
  cursor: pointer;
}

.k-resume-modal {
  color: #333;
  border-radius: 8px;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: #fff;
  position: fixed;
  margin: 0 auto;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .bannerbox {
    width: 50%;
  }
}
</style>